<template>
  <div class="top">
    <div class="left">
      <div class="box">
        <div class="one">Send Mail & Packages</div>
        <div class="two">Convenient Domestic Shipping</div>
        <div class="three">Want to save time and ship from home? Use <a href="#">enhanced Click-N-Ship® service</a> to:</div>
        <div class="four">
          <ul>
            <li>Pay for postage and print a shipping label from your printer. No printer? 
              <a href="#">See ways to get labels without a printer using USPS Label Broker® or USPS Label Delivery service</a>
              .</li>
            <li>Schedule USPS® Package Pickup from your home or office.<sup>1</sup></li>
            <li>Bonus: Get access to lower Commercial Rates for shipping labels.</li>
          </ul>
        </div>
        <div class="five">
          <el-button class="button">Print a Label</el-button>
          <a href="#">Learn More</a>
        </div>
      </div>
    </div>
    <div class="right">
      <img src="../../assets/image/mail-and-ship-hero-2.jpg"/>
    </div>
  </div>
 <div class="body">
  <div class="threeBox">
    <div class="box">
      <div class="title"><a href="#">Find a Location</a></div>
      <div class="text">Search for Post Offices and other locations to buy stamps, ship packages, apply for passports, and more.</div>
    </div>
    <div class="box" style="margin-left: 20px;">
      <div class="title"><a href="#">Calculate a Price</a></div>
      <div class="text">Determine how much postage or how many stamps you need for your letter or package based on size, weight, and destination.</div>
    </div>
    <div class="box" style="margin-left: 20px;">
      <div class="title"><a href="#">Look Up a ZIP Code <sup>TM</sup></a></div>
      <div class="text">Find a ZIP Code™ by street address or city and state to make sure your mail arrives at the right place.</div>
    </div>
  </div>

  <div class="card">
    <div class="title">Shipping & Mailing with USPS</div>
    <div class="boxs" >
      <div class="box"v-for="item in cardList">
        <div class="img">
          <img :src="item.img"/>
        </div>
        <div class="title1">
          <a href="#">{{ item.title }}</a>
        </div>
        <div class="text">{{ item.text }}</div>
      </div>
    </div>
  </div>

  <div class="table">
    <div class="title">Domestic Mail & Shipping Services</div>
    <div class="table">
      <el-table :data="tableData" style="width: 760px;height: 100%;" :row-style="{height:'74px',color:'black'}" :header-row-style="{color:'black'}">
        <el-table-column prop="service" label="Service" width="280px"/>
        <el-table-column prop="shippingTime" label="Shipping Time" width="200px"/>
        <el-table-column prop="pricing" label="Pricing" width="90px"/>
        <el-table-column prop="mailOrPackage" label="Mail or Package" />
      </el-table>
    </div>
    <div class="button">
      <el-button>See All Mail & Shipping Servicrs</el-button>
      <a href="#">See International Shipping Service</a>
    </div>
  </div>

  <div class="list">
    <ol>
      <li v-for="item in list">{{item.list}}</li>
    </ol>
  </div>
 </div>
 <!-- <feet></feet> -->
</template>
<script setup>
import { backtopEmits } from 'element-plus';
import feet from '../../components/modules/feet.vue'
import {ref} from 'vue'

const cardList=ref([
  {
    img:'https://www.usps.com/assets/images/mailship/mail-and-ship-free-supplies.jpg',
    title:'Order Free Supplies',
    text:'Start your shipping with free Priority Mail® and Priority Mail Express® envelopes and boxes, and other supplies.'
  },
  {
    img:'https://www.usps.com/assets/images/mailship/mail-and-ship-stamps.jpg',
    title:'Buy Stamps',
    text:'Browse our collection of postage stamps. Find stamps by theme, color, season, mail service, and more.'
  },  
  {
    img:'https://www.usps.com/assets/images/mailship/mail-and-ship-schedule-a-pickup.jpg',
    title:'Schedule a Pickup',
    text:'Get a free package pickup during your regular mail delivery or pay a fee for a pickup at a time that works for you.'
  },
  {
    img:'https://www.usps.com/assets/images/mailship/mail-and-ship-prepare-your-mail.jpg',
    title:'Send Letters & Cards',
    text:'Learn how to choose the best envelope or card size, follow Postal addressing standards, and get stamps for your mail.'
  },
  {
    img:'https://www.usps.com/assets/images/mailship/mail-and-ship-prepare-your-package.jpg',
    title:'Prepare Your Package',
    text:'Get tips on how to pack your box, choose a mail service, and add enough postage so your package arrives on time.'
  },
  {
    img:'https://www.usps.com/assets/images/mailship/mail-and-ship-military-mail.jpg',
    title:'Ship to Military',
    text:'Sending APO, FPO, or DPO mail? No matter where your loved one is stationed, you’ll pay domestic prices for military and diplomatic mail.'
  },
  {
    img:'https://www.usps.com/assets/images/mailship/mail-and-ship-insurance.jpg',
    title:'Add Insurance & Extra Services',
    text:'Many domestic2 and international3 services include free insurance and USPS Tracking®. You can get additional coverage and extra services like Certified Mail® for peace of mind.'
  },
  {
    img:'https://www.usps.com/assets/images/mailship/mail-and-ship-personalize-mail.jpg',
    title:'Create Custom Mail, Cards, & Envelopes',
    text:'Personalize cards and envelopes with your own photos or use third-party vendor templates to help you create a unique design.'
  },
  {
    img:'https://www.usps.com/assets/images/mailship/mail-and-ship-money-order.jpg',
    title:'Purchase Money Orders',
    text:'Sending money orders at any Post Office is easy to do. Pay with a debit card, cash, or traveler’s check. Money orders are safe, cost-effective, and never expire.'
  },
])
const tableData=ref([
  {
    service:'Priority Mail Express®',
    shippingTime:'Next Day to 2 Days4',
    pricing:'$$$',
    mailOrPackage:'Packages'
  },
  {
    service:'Priority Mail®',
    shippingTime:'1–3 Days5',
    pricing:'$$',
    mailOrPackage:'Packages'
  },
  {
    service:'USPS Ground Advantage®',
    shippingTime:'2–5 Days6',
    pricing:'$',
    mailOrPackage:'Packages'
  },
  {
    service:'Media Mail®',
    shippingTime:'2–8 Days',
    pricing:'$',
    mailOrPackage:'Packages'
  },
  {
    service:'First-Class Mail®',
    shippingTime:'1–5 Days',
    pricing:'$',
    mailOrPackage:'Mail'
  },
])
const list=ref([
  {
    list:'For details on free Package Pickup, go to Schedule a Pickup. Back ^',
  },
  {
    list:'Available only with certain products and to certain domestic destinations. Insurance does not cover certain items. For details regarding claim exclusions, see Sections 609.4.3 (Non-payable Claims), 609 (Filing Indemnity Claims for Loss or Damage), and 503.4 (Insured Mail) of the Domestic Mail Manual. Back ^',
  },
  {
    list:'Not available with Flat Rate envelopes and small Flat Rate boxes or when shipping to certain destinations. Purchased insurance replaces ordinary indemnity coverage. See the International Mail Manual for availability and limitations of coverage. Back ^',
  },
  {
    list:'Scheduled delivery date and time depends on origin, destination, and Post Office™ acceptance time. Some restrictions apply. For additional information, visit the Postage Calculator. Back ^',
  },
  {
    list:'In most cases, the expected delivery date that is printed on your receipt or provided at checkout will reflect a delivery time of 1, 2, or 3 days based on origin, destination, and Post Office™ acceptance time. Exceptions and restrictions apply. Visit Priority Mail for details.  Back ^',
  },
  {
    list:'For mailable items up to 70 lbs. Expected delivery in 2–5 days. Packages going to certain places (including Alaska, Hawaii, and offshore destinations), or containing hazardous materials or live animals may receive slower service.  Back ^',
  },
])

</script>
<style scoped>
img{
  width: 100%;
  height: 100%;
}
.top{
  width: 100%;
  height: 450px;
  background-color: #f7f7f7;
  display: flex;
  flex-direction: row;
  .left{
    width: 55%;
    height: 100%;
    /* background-color: yellowgreen; */
    .box{
      width: 630px;
      height: 100%;
      /* background-color: yellow; */
      float: right;
      .one{
        width: 100%;
        height: 50px;
        text-align: left;
        margin-top: 40px;
        /* background-color: antiquewhite; */
        font-family: "HelveticaNeueW02-75Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 32px;
        font-weight: 700;
        line-height: 36px;
        color: #333366;
      }
      .two{
        width: 100%;
        height:30px;
        text-align: left;
        margin-top: 10px;
        /* background-color: yellowgreen; */
        font-family: "HelveticaNeueW02-75Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 28px;
        line-height: 32px;
        color: #333366;
      }
      .three{
        width: 100%;
        height: 40px;
        text-align: left;
        margin-top: 10px;
        /* background-color: rgb(50, 195, 205); */
        font-family: "HelveticaNeueW02-55Roma", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 16px;
        line-height: 22px;
        color: #000000;
        a{
          color: #4889be;
        }
      }
      .four{
        width: 610;
        height: 150px;
        text-align: left;
        /* margin-top: 10px; */
        padding-left: 20px;
        /* background-color: yellowgreen; */
        font-family: "HelveticaNeueW02-55Roma", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 16px;
        line-height: 22px;
        color: #000000;
        a{
          color: #4889be;
        }
      }
      .five{
        width: 100%;
        height: 45px;
        /* background-color: rgb(115, 134, 75); */
        .button{
          width: 200px;
          height: 45px;
          background-color: #333366;
          color: #ffffff;
          font-size: 18px;
          border: 0;
        }
        a{
          font-size: 18px;
          color: #4889be;
          margin-left: 15px;
        }
      }
    }
  }
  .right{
    width: 45%;
    height: 100%;
    background-color: antiquewhite;
  }
}
  .body{
    position: relative;
    margin: 20px auto 0;
    min-width: 1170px;
    width: 1170px;
    /* height: 2805px; */
    margin-bottom: 40px;
    /* background-color: yellowgreen; */
    /* margin: 60px 0; */
    /* top:60px; */
    .threeBox{
      width: 100%;
      height: 170px;
      /* background-color: #333366; */
      display: flex;
      flex-direction: row;
      .box{
        width: 390px;
        height: 100%;
        /* background-color: #4889be; */
        .title{
          width: 100%;
          height: 60px;
          line-height: 60px;
          /* background-color: #707075; */
          text-align: center;
          a{
            font-size: 28px;
            font-weight: 600;
            color: #3a74a3;
          }
        }
        .text{
          width: 100%;
          height: 110px;
          /* background-color: yellow; */
          text-align: center;
        }
      }
    }
    .card{
      width: 1050px;
      height: 1341px;
      margin: 20px auto 0;
      /* background-color: #683c3c; */
      .title{     
        width: 100%;
        height: 40px;
        text-align: center;
        /* background-color: yellow; */
        font-size: 28px;
        font-weight: 600;
        color: #333366;
      }
      .boxs{
        width: 100%;
        overflow-wrap: break-word;
        /* height: 1200px; */
        margin-top: 20px;
        /* background-color: tomato; */
        /* display: flex; */
        .box{
          float: left;
          max-width: 320px;
          min-height: 360px;
          margin:10px 0 30px 30px;
          box-shadow: 5px 8px 8px rgba(0, 0, 0, 0.767);
          /* background-color: rgb(9, 172, 184); */
          display: flex;
          flex-direction: column;
          /* overflow: auto; */
          .img{
            width: 100%;
            height: 150px;
            /* margin-bottom: 25px; */
            /* background-color: #4889be; */
          }
          .title1{
            /* width: 100%; */
            /* height: 50px; */
            /* display: ; */
            /* 将样式恢复初始值 */
            /* all:initial; */
            overflow-wrap: break-word;
            margin-top: 25px;
            margin-left: 15px;
            text-align: left;
            /* background-color: yellow; */
            a{
              font-size: 23px;
              color: #4889be;
            }
          }
          .text{
            width: 295px;
            height: 135px;
            margin-top: 10px;
            margin-left: 15px;
            /* background-color: rgb(87, 104, 53); */
            flex: 1;
          }
        }
      }
    }
    .table{
      width: 1050px;
      /* height: 530px; */
      /* margin: 0 auto; */
      /* margin-bottom: 20px; */
      /* background-color: yellow; */
      overflow-wrap: break-word;
      .title{     
        width: 100%;
        height: 40px;
        /* text-align: center; */
        /* background-color: rgb(44, 44, 29); */
        font-size: 29px;
        font-weight: 600;
        color: #333366;
      }
      .table{
        width: 100% !important;
        /* height: 450px !important; */
        margin-top: 25px;
      }
      .button{
        width: 100%;
        height: 47px;
        /* background-color: #b80404; */
        margin-top: 80px;
        .el-button{
          height: 100%;
          width: 350px;
          background-color:#333366;
          color:#ffffff;
          font-size:18px;
          font-weight: 600;
          border: 0;
        }
        .el-button:hover{
            background-color: #ffffff;
            color: #333366;
          }
      }
      a{
        margin-left: 20px;
        color: #3a74a3;
        font-weight: 600;
        font-size: 18px;
      }
    }
    .list{ 
      margin-top: 100px;
      overflow-wrap: break-word;
      /* background-color: #3a74a3; */
      padding-left: 20px;
      ol li{
        font-family: "HelveticaNeueW02-55Roma", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 12px;
        line-height: 22px;
        color: #000000;
      }
    }
  }
</style>